<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="/statics/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/statics/css/qxww_login.css">
</head>
<body>
<div class="container-fluid">
    <div class="title">密码登录</div>
    <form action="" method="post" id="qxww_login_form">
        <div>
            <img src="/statics/images/qxww_login_phone.png" alt="手机号">
            <input id="login_phone" name="mobile" type="text" placeholder="输入手机号" maxlength="11"/>
        </div>
        <div>
            <img src="/statics/images/qxww_login_password.png" alt="密码">
            <input id="login_password" name="password" type="password" placeholder="输入密码"/>
        </div>
    </form>
    <div id="login" class="text-center">登录</div>
</div>

<!--登录错误提示  开始-->
<div class="modal fade" tabindex="-1" role="dialog" id="login_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="close" data-dismiss="modal" aria-label="Close">
                    <img style="vertical-align: 2px;" src="/statics/images/sever_close.png" alt="">
                </div>
                <h4 class="modal-title">登录错误</h4>
            </div>
            <div class="modal-body">
                <div id="modal_error">是否确认修补?</div>
            </div>
            <div class="modal-footer clearfix">
                <div class="pull-left" data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--登录错误提示  结束-->

<script type="text/javascript" src="/statics/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/statics/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
    	$('body').height( $(window).height() );//设置body高度

        $(window).resize(function () {
	        amend_fluid_place();//修正登录框位置
	        $('body').height( $(window).height() );//设置body高度
        });

        //修正登录框位置
	    amend_fluid_place();
        function amend_fluid_place(){
	        var window_w = $(window).width();
	        var window_h = $(window).height();
	        var w = $('.container-fluid').width();
	        var h = $('.container-fluid').height();
	        $('.container-fluid').css('left', ( window_w - w ) / 2.18 );
	        $('.container-fluid').css('top', ( window_h - h ) / 3 );
        }

	    //修正弹层位置
	    function amend_modal_place($modal) {
		    var window_width = $(window).width();
		    var window_height = $(window).height();
		    var width = $modal.width();
		    var height = $modal.find('.modal-dialog').height();

		    var left = ( window_width - width ) / 2;
		    var top  = ( window_height - height ) / 4;

		    $modal.css('left',left);
		    $modal.css('top',top);
	    }

        //手机号段验证  正则
        function verify_phone($value) {
	        var reg = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;//验证手机号是否符合号段
	        if (reg.test($value)) {
		        return true; //验证符合
	        } else {
		        return false; //验证不符合
	        }
        }

        //登录  手机号段验证及交互效果
	    login_phone_verify();
        function login_phone_verify() {
            var input = $('#login_phone');
            input.on('keyup',function () {
                if( verify_phone( input.val() ) ){
                	input.parents('div').removeClass('active');
                }else {
	                input.parents('div').addClass('active');
                }
            });
        }

        //点击登录  提交form表单
	    login();
        function login() {
            $('#login').on('click',function () {
            	$.ajax({
                    url: '/user/checklogin',
                    dataType: 'json',
                    type: 'POST',
                    data:$('#qxww_login_form').serialize(),
                    success: function (data) {
                        if(data.code == 0){
                        	window.location = data.data.url;
                        }else if(data.code == 1){
                        	$('#modal_error').text( data.data );
                        	amend_modal_place($('#login_modal'));//修正弹层位置
	                        $('#login_modal').modal({keyboard:false});
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            });
        }

    });
</script>
</body>
</html>